<template>
    <div v-echo-page page-name="pwr">
      <div>
        <img src = "../assets/power.png">
      </div>
      <div class = "testInfo" v-show = "isShow">
        <div>
          <br>
          <div class = "unitTest">
            <div class = "test1">
              <ul>
                <li> Unit Name </li>
                <li> Serial No</li>
                <li> Program No</li>
                <li> ROM</li>
                <li> RAM</li>
              </ul>

              <ul class = "item" >
                <li> : FE-8010 </li>
                <li> : XXXXXX </li>
                <li> : 1251002-01.XX </li>
                <li> : OK </li>
                <li> : OK </li>
              </ul>
            </div>
          </div>

          <div class = "transceiverTest">
            <div class = "test2">
              <ul>
                <li> Unit Name </li>
                <li> Serial No</li>
                <li> Program No</li>
                <li> ROM</li>
                <li> RAM</li>
              </ul>

              <ul class = "item" >
                <li> : FE-8020 </li>
                <li> : XXXXXX </li>
                <li> : 1251003-01.XX </li>
                <li> : OK </li>
                <li> : OK </li>
              </ul>
            </div>
            <div class ="test3">
              <ul>
                <li> Unit Name </li>
                <li> Serial No</li>
                <li> Program No</li>
                <li> ROM</li>
                <li> RAM</li>
              </ul>

              <ul class = "item" >
                <li> : FE-8020 </li>
                <li> : XXXXXX </li>
                <li> : 1251003-01.XX </li>
                <li> : OK </li>
                <li> : OK </li>
              </ul>
            </div>
          </div>

          <div class = "bottom"> Press any Key to continue </div>
        </div>
      </div>
    </div>
</template>

<script>
  import * as EchoKey from '../utils/echo-key'
  export default {
    components: {
    },
    data () {
      return {
        isShow: false
      }
    },
    ready () {
      let _this = this
      if (_this.isShow === false) {
        setTimeout(function () {
          _this.isShow = true
        }, 2000)
      }
    },
    [EchoKey.ANYKEY] (evt) {
      this.isShow = false
      if (evt.keyname !== 'menu-esc') {
        this.$echo.routeTo('disp')
      }
    },
    [EchoKey.PWR] (evt) {
      let _this = this
      this.isShow = false
      let _echo = this.$echo
      if (_echo.poweron === true) {
        setTimeout(function () {
          _this.isShow = true
        }, 2000)
      }
    },
    [EchoKey.DISP] (evt) {
      this.$echo.routeTo('disp')
    },
    [EchoKey.MENU_ESC] (evt) {
      this.$echo.routeTo('disp')
    }
  }
</script>

<style lang="less">
  .testInfo {
    position: relative;
    top: -700px;
    text-align: left;
    background-color: black;
    height: 720px;
  }

  li {
    list-style: none;
  }

  ul.item {
    position: relative;
    left: 200px;
    top: -150px;
  }

  div.test3 {
    position: relative;
    top: -145px;
  }

  .unitTest {
    color: white;
    width: 500px;
    height: 200px;
    border: 2px dashed white;
    border-radius: 30px;
    margin-left: 20px;
    font-size: 25px;
  }

  .transceiverTest {
    color: white;
    width: 500px;
    height: 400px;
    border: 2px dashed white;
    border-radius: 30px;
    margin-left: 20px;
    font-size: 25px;
  }

  div.bottom {
    text-indent: 20px;
    font-size: 25px;
    line-height: 50px;
  }
</style>
